In SvelteKit, layouts are used to wrap multiple pages with shared UI, like navigation bars or footers. Nested layouts allow you to create hierarchical layouts for different sections of your app, while layout resets let you break out of a parent layout when needed.
Nested layouts are layouts inside other layouts. This is useful for structuring parts of your app that share some UI elements but differ in others.
In this structure, dashboard/settings uses both the global layout and the dashboard-specific layout.
A layout reset lets you opt-out of inheriting a parent layout. This is useful for pages like authentication or error pages that need a completely different layout.
The @layout.svelte file resets the layout hierarchy. Pages inside the login folder will not use the global layout.
Use nested layouts to share UI between related sections of your app.
Use layout resets (
@layout.svelte) to completely change or remove inherited layouts.Keep layouts modular and avoid bloating a single layout file.
Organize routes hierarchically to reflect nested layouts clearly.